<template>
    <div class=''>
      <el-card>
          <div id="main1" style="width: 100%; height: 400px"></div>
      </el-card>
    </div>
</template>

<script>
import dtime from "time-formater";
import * as echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      severDay: [],
      apiArr: [
        [0, 100, 50, 150, 200, 175, 150],
        [50, 150, 100, 150, 200, 100, 150],
        [100, 50, 200, 150, 100, 175, 50]
      ]
    };
  },
   mounted() {
    for (let i = 6; i > -1; i--) {
      const date = dtime(new Date().getTime() - 86400000 * i).format(
        "YYYY-MM-DD"
      );
      this.severDay.push(date);
    }
    // console.log(this.severDay);
    this.myChart1 = echarts.init(document.getElementById("main1"));
    this.getData();
    this.getSevenData();
  },
  watch: {
    apiArr() {
      this.getData();
    }
  },
  methods: {
    getSevenData() {
      let apiArr = [[], [], []];
      this.severDay.forEach(item => {
        this.$axios
          .get(`http://elm.cangdu.org/statis/user/${item}/count`)
          .then(res => {
            console.log(res);
            apiArr[0].push(res.data.count);
          });
        this.$axios
          .get(`http://elm.cangdu.org/statis/admin/${item}/count`)
          .then(res => {
            // console.log(res);
            apiArr[2].push(res.data.count);
          });
        this.$axios
          .get(`http://elm.cangdu.org/statis/order/${item}/count`)
          .then(res => {
            // console.log(res);
            apiArr[1].push(res.data.count);
          });
      });
      this.apiArr = apiArr;
    },
    getData() {
      const colors = ["#5793f3", "#675bba", "#d14a61"];
      const option = {
        color: colors,
        title: {
          text: "走势图",
          subtext: "星期走势图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["新注册用户", "新增订单", "新增管理员"]
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
            dataView: { readyOnly: true },
            dataZoom: {
              yAxisIndex: "none"
            },
            magicType: {
              type: ["line", "bar", "pie"]
            },
            restore: {}
          }
        },
        // 直角坐标系 grid 中的 x 轴
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.severDay
          }
        ],
        // 直角坐标系 grid 中的 y 轴
        yAxis: [
          {
            type: "value",
            name: "用户",
            min: 0,
            max: 200,
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          },
          {
            type: "value",
            name: "订单",
            min: 0,
            max: 200,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "新注册用户",
            type: "bar",
            // data: [0, 100, 50, 150, 200, 175, 150],
            data: this.apiArr[0],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          },
          {
            name: "新增订单",
            type: "bar",
            // data: [50, 150, 100, 150, 200, 100, 150],
            data: this.apiArr[1],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          },
          {
            name: "新增管理员",
            type: "bar",
            data: this.apiArr[2],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          }
        ]
      };
      this.myChart1.setOption(option);
    }
  },
  components: {}
};
</script>

<style lang='scss'>
</style>

